<!-- Home.vue -->
<script setup>
import LearnTitle from './components/LearnTitle.vue'
import Progress from './components/Progress.vue'
import UsuallyTools from './components/UsuallyTools.vue'
import LearnData from './components/LearnData.vue'
import HotSkills from './components/HotSkills.vue'
import StudyPlan from './components/StudyPlan.vue'
</script>
<template>
  <main class="main">
    <div class="left">
      <!-- learn-title -->
      <LearnTitle></LearnTitle>
      <!-- progress -->
      <Progress></Progress>
      <!-- usually-tools -->
      <UsuallyTools></UsuallyTools>
      <div class="left_bottom">
        <!-- learn-data -->
        <LearnData></LearnData>
        <!-- hot-skill -->
        <HotSkills></HotSkills>
      </div>
    </div>
    <div class="right">
      <StudyPlan></StudyPlan>
    </div>
  </main>
  <!-- study-plan -->
</template>
<style scoped lang="less">
.main {
  display: flex;
  justify-content: space-around;
  height: 100vh;
  .left {
    width: 43%;
    height: 95%;
    margin-top: 20px;
    border: 0.1px solid #25272d;
    box-shadow: 1px 1px 12px rgba(255, 255, 255, 0.3);
    background-color: #101014;
    .left_bottom {
      display: flex;
      width: 80%;
      margin: auto;
      justify-content: space-between;
    }
  }
  .right {
    width: 43%;
    height: 95%;
    margin-top: 20px;
    border: 0.1px solid #25272d;
    box-shadow: 1px 1px 12px rgba(255, 255, 255, 0.3);
    background-color: #101014;
  }
}
</style>
